<template>
  <div class="commonBox bx">
    <div class="commonBoxNavBox bx">
      <ul class="commonBoxNav br mb14">
        <li v-for="(item,index) in msgData" :class="{active:index==navActiveStutas}">
          <router-link :to="item.path">{{item.name}}</router-link>
        </li>
      </ul>
    </div>
    <transition name='fade' mode='out-in'>
        <router-view v-on:pageName='changeNavActiveStutas'></router-view>
      </transition>
  </div>
</template>

<script>
  export default {
    name: 'commonBox',
    data() {
      return {
        navActiveStutas: 0,
        liDataGet: [{
          title: '五年级1班'
        }, {
          title: '五年级2班'
        }, {
          title: '五年级3班'
        }, {
          title: '五年级4班'
        }, {
          title: '五年级5班'
        }],
        msgData: [{
          name: '班级相册',
          path: '/mine/classAlbum'
        }, {
          name: '班级信息',
          path: '/mine/classInformation'
        }, {
          name: '课表管理',
          path: '/mine/timetable'
        },{
          name: '作业布置',
          path: '/mine/homework'
        }, {
          name: '考试成绩',
          path: '/mine/testScore'
        }, {
          name: '考勤统计',
          path: '/mine/attendanceStatistics'
        }]

      }
    },
    methods: {
      change: function (e) {
        //console.log(e)
      },
    },
    beforeRouteEnter(to, from, next) {
      //传给父组建值
      next(vm => {
        vm.$emit('pageName', to.name)
      })


    },
    methods: {
      changeNavActiveStutas: function (data) {
       
        switch (data) {
          case 'classAlbum':
            this.navActiveStutas = 0;
            break;
          case 'classInformation':
            this.navActiveStutas = 1;
            break;
            case 'timetable':
            this.navActiveStutas = 2;
            break;
            case 'homework':
            this.navActiveStutas = 3;
            break;
          case 'testScore':
            this.navActiveStutas = 4;
            break;
          case 'attendanceStatistics':
            this.navActiveStutas = 5;
            break;
        }
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
